<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>个人信息</title>
    <link rel="icon" href="favicon.ico" type="images/ico">
    <meta name="author" content="dc">
    <link rel="stylesheet" type="text/css" href="/css/materialdesignicons.min.css">
    <link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="/css/animate.min.css">
    <link rel="stylesheet" type="text/css" href="/css/style.min.css">
    <link href="/js/bootstrap-table/bootstrap-table.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="/js/jquery-confirm/jquery-confirm.min.css"/>
    <!--时间选择插件-->
    <link rel="stylesheet" href="/js/bootstrap-datetimepicker/bootstrap-datetimepicker.min.css"/>
    <!--日期选择插件-->
    <link rel="stylesheet" href="/js/bootstrap-datepicker/bootstrap-datepicker3.min.css"/>
    <link rel="stylesheet" href="/css/skin.css"/>
    <link rel="stylesheet" type="text/css" href="/css/daterangepicker.css" />
    <link rel="stylesheet" href="/css/skin.css"/>
    <link rel="stylesheet" href="/css/user/userInfo.css"/>
</head>
<body>
<div class="container-fluid clue-page">
    <div class="card">
        <div class="card-header">
            <h1>个人信息</h1>
        </div>
        <div class="card-body" style="padding: 0 30px 40px 30px;">
            <!-- 展示状态 -->
            <div style="position: relative;" class="top" id="userInfoDiv">
                <div style="width: 240px;height: 100%;margin-right:20px">
                    <div style="width: 100%;height: 500px">
                        <div class="userMess">
                            <div class="user-info">
                                <div class="head" id="head">
                                    <a href="!#" data-toggle="modal" data-target="#editHeadModal" id="avatar"><img th:src="@{(${userInfo.accessUrl})}" alt="头像"><span>修改</span></a>
                                </div>
                                <div class="replaceImg">
                                    点击更换头像
                                </div>
                                <div style="text-align: center">
                                    <span  th:text="${userInfo.userName}"></span>
                                    <span class="vip" ><strong>LV </strong><strong th:text="${userInfo.userLevel}">11</strong></span>
                                </div>
                            </div>
                        </div>
                        <div class="well form-well" style="margin-top: 20px;padding: 20px 0">
                            <div class="userModule userActive" style="margin-top:10px"><img src="/images/1.png" alt="">基本信息</div>
                            <div class="userModule"><img src="/images/2-1.png" alt="">销售等级</div>
                            <div class="userModule"><img src="/images/3-1.png" alt="">销售积分</div>
                            <div class="userModule"><img src="/images/4-1.png" alt="">销售业绩</div>
                            <div class="userModule"><img src="/images/5-1.png" alt="">名人堂</div>
<!--                            <div class="userModule">业绩勋章</div>-->
                        </div>
                    </div>
                </div>
                <div class="left-content">
                    <div class="content" >
                        <div class="well form-well">
                        <div class="title-box">
                            <div class="title" style="visibility: hidden;">
                                <span id="userId" class="hidden" th:text="${userInfo.userId}"></span>
                            </div>
                            <div class="title" style="position: relative;">
                                <h3>我的资料</h3>
                                <div class="info userInfo" id="userMess">
                                    <div class="row">
                                        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">
                                            <div class="info-item">用户名：<span class="text" th:text="${userInfo.userName}"></span></div>
                                        </div>
                                        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">
                                            <div class="info-item">创建时间：<span class="text" th:text="${createTm}"></span></div>
                                        </div>
                                        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">
                                            <div class="info-item">生日：<span class="text" th:text="${userInfo.userBirth}"></span></div>
                                        </div>
                                        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">
                                            <div class="info-item">政治面貌：<span class="text" th:text="${userInfo.politicalIdentity}"></span></div>
                                        </div>
                                        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">
                                            <div class="info-item" style="width: 100%">身份证号：<span class="text" th:text="${userInfo.userCard}"></span></div>
                                        </div>
                                        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">
                                            <div class="info-item">籍贯：<span class="text" th:text="${userInfo.nativePlace}"></span></div>
                                        </div>
                                        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">
                                            <div class="info-item">个人邮箱：<span class="text" th:text="${userInfo.userEmail}"></span></div>
                                        </div>
                                        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">
                                            <div class="info-item">家庭住址：<span class="text" th:text="${userInfo.nativePlaceAddr}"></span></div>
                                        </div>
                                        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">
                                            <div class="info-item">联系方式：<span class="text" th:text="${userInfo.userContact}"></span></div>
                                        </div>
                                        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">
                                            <div class="info-item">紧急联系人：<span class="text" th:text="${userInfo.emergencyContactWay}"></span></div>
                                        </div>
                                        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">
                                            <div class="info-item">联系方式：<span class="text" th:text="${userInfo.emergencyContact}"></span></div>
                                        </div>
                                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                            <div class="pull-right">
                                                  <button id="modify" class="btn btn-primary pull-right" onclick="showResetPasswordModal();" style="margin-left:20px;padding: 8px 12px;">修改密码</button>
                                                  <button id="editBtn" class="btn btn-primary pull-right" onclick="baseInfo(1)">编辑</button>
                                                  <span id="editBs" class="text" th:text="${editBs}" style="display:none;"></span>
                                            </div>
                                        </div>
                                    </div>


<!--                                    <div class="info-item">婚姻状况：<span class="text" th:text="${userInfo.maritalStatus == 0?'未婚':'已婚'}"></span></div>-->
<!--                                    <div class="info-item">户籍地址：<span class="text" th:text="${userInfo.nativePlaceAddr}"></span></div>-->
<!--                                    <div class="info-item">现居住地：<span class="text" th:text="${userInfo.userNowAddr}"></span></div>-->
<!--                                    <div class="info-item">政治身份：<span class="text" th:text="${userInfo.userSex == 0?'男':'女'}"></span></div>-->

                                </div>
                                <div class="info userInfo" id="editUserinfo" style="display:none;">
                                    <div class="form-group">
                                        <label class="col-sm-1 control-label" style="width: 80px;text-align: left;padding:0;">用户名</label>
                                        <div class="col-sm-6">
                                            <input id="userName" type="text" class="form-control" placeholder="请输入用户名" >
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-1 control-label" style="width: 80px;text-align: left;padding:0;">创建时间</label>
                                        <div class="col-sm-6">
                                            <input id="creatTime" type="text" class="form-control" placeholder="请输入创建时间" readonly="true">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-1 control-label" style="width: 80px;text-align: left;padding:0;">出生年月</label>
                                        <div class="col-sm-6">
                                            <input id="userBirth" type="text" class="form-control" placeholder="请选择出生年月" onkeyup="value=value.replace(/[^\w\.\/]/ig,'')">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-1 control-label" style="width: 80px;text-align: left;padding:0;">政治面貌</label>
                                        <div class="col-sm-6">
                                            <input id="politicalIdentity" type="text" class="form-control" placeholder="请输入政治面貌">
                                        </div>
                                    </div>
                                    <div class="form-group" style="width:100%">
                                        <label class="col-sm-1 control-label" style="width: 80px;text-align: left;padding:0;">身份证号</label>
                                        <div class="col-sm-4">
                                            <input id="userCard" type="text" class="form-control" onkeyup="value=value.replace(/[^\w\.\/]/ig,'')"
                                                   placeholder="请输入身份证号">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-1 control-label" style="width: 80px;text-align: left;padding:0;">籍贯</label>
                                        <div class="col-sm-6">
                                            <input id="nativePlace" type="text" class="form-control"
                                                   placeholder="请输入籍贯">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-1 control-label" style="width: 80px;text-align: left;padding:0;">邮箱</label>
                                        <div class="col-sm-6">
                                            <input id="userEmail" type="text" class="form-control" placeholder="请输入邮箱">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-1 control-label" style="width: 80px;text-align: left;padding:0;">家庭住址</label>
                                        <div class="col-sm-6">
                                            <input id="userNowAddr" type="text" class="form-control"
                                                   placeholder="请输入现居住地">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-1 control-label" style="width: 80px;text-align: left;padding:0;">联系方式</label>
                                        <div class="col-sm-6">
                                            <input id="userContact" type="text" class="form-control"
                                                   placeholder="请输入联系方式" onkeyup="value=value.replace(/[^\w\.\/]/ig,'')">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-1 control-label" style="width: 80px;text-align: left;padding:0;">紧急联系人</label>
                                        <div class="col-sm-6">
                                            <input id="emergencyContactWay" type="text" class="form-control" placeholder="请输入紧急联系人">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-1 control-label" style="width: 80px;text-align: left;padding:0;">联系方式</label>
                                        <div class="col-sm-6">
                                            <input id="emergencyContact" type="text" class="form-control" placeholder="请输入紧急联系人联系方式" onkeyup="value=value.replace(/[^\w\.\/]/ig,'')">
                                        </div>
                                    </div>
                                    <button class="btn btn-primary" id="saveBtn" onclick="baseInfo(2)">保存</button>
                                </div>
                                <hr size="2" style="width: 100%">
                                <div class="title" style="position: relative;">
                                    <h3>教育经历</h3>
                                    <div class="info">
                                        <div class="enducationInfo">
                                            <table id="educationTable"></table>
                                        </div>
                                        <div class="pull-right" style="margin: 20px 0;display: flex">
                                            <button id="addBtn" class="btn btn-label btn-success" onclick="addEducation()" data-toggle="modal" >
                                                <label for=""><i class="mdi mdi-plus-circle-outline"></i></label>
                                                添加</button>
<!--                                            <button id="" class="btn btn-primary" onclick="" data-toggle="modal" data-target="#staticBackdrop" style="margin-left: 20px">编辑</button>-->
                                        </div>
<!--                                        <div class="info-item">毕业学校：<span class="text" th:text="${userInfo.userSchool}"></span></div>-->
<!--                                        <div class="info-item">学历：<span class="text" th:text="${userInfo.userEducation}"></span></div>-->
<!--                                        <div class="info-item">学位：<span class="text" th:text="${userInfo.userDegree}"></span></div>-->
<!--                                        <div class="info-item">专业：<span class="text" th:text="${userInfo.userMajor}"></span></div>-->
                                    </div>
                                </div>
                                <hr size="2" style="width: 100%">
                                <div class="title">
                                    <h3>职务信息</h3>
                                    <div class="info">
                                        <div class="dutiesInfo">
                                            <div class="info-item">所属部门：<span class="text" th:text="${userInfo.companyName}"></span></div>
                                            <div class="info-item">工 &nbsp;&nbsp;号：<span class="text" th:text="${userInfo.userJobNumber}"></span></div>
                                            <div class="info-item">职 &nbsp;&nbsp;务：<span class="text" th:text="${userInfo.position}"></span></div>
                                            <div class="info-item">直属上级：<span class="text" th:text="${userSuperiorName}"></span></div>
                                        </div>
                                        <div class="dutiesList" style="margin-top: 20px">
                                            <div style="margin: 20px 0">
                                                <span style="font-weight: 400;font-size: 14px;color: #455165;">下属列表</span>
                                                <div id="browsData" class="select-switch pull-right">
                                                    <label for="all"><input type="radio" name="date" value="" id="all" checked=""><span>全部</span></label>
                                                    <label for="working"><input type="radio" name="date" value="0" id="working"><span>在职</span></label>
                                                    <label for="noWorking"><input type="radio" name="date" value="1" id="noWorking"><span>离职</span></label>
                                                </div>
                                            </div>

                                            <div class="subDiv">
                                                <table id="subordinateTable"></table>
                                            </div>
<!--                                            <div class="dutiesSate">-->

<!--                                                <div class="form-check form-check-inline">-->
<!--                                                    <input class="form-check-input" type="radio" id="inlineCheckbox1" value="option1" name="dutirs" checked onclick="subordinateList('')">-->
<!--                                                    <label class="form-check-label" for="inlineCheckbox1">全部</label>-->
<!--                                                </div>-->
<!--                                                <div class="form-check form-check-inline">-->
<!--                                                    <input class="form-check-input" type="radio" id="inlineCheckbox2" value="option1" name="dutirs" onclick="subordinateList(0)">-->
<!--                                                    <label class="form-check-label" for="inlineCheckbox1">只显示在职</label>-->
<!--                                                </div>-->
<!--                                                <div class="form-check form-check-inline">-->
<!--                                                    <input class="form-check-input" type="radio" id="inlineCheckbox3" value="option2" name="dutirs" onclick="subordinateList(1)">-->
<!--                                                    <label class="form-check-label" for="inlineCheckbox2">只显示离职</label>-->
<!--                                                </div>-->
<!--                                            </div>-->
                                        </div>
                                    </div>
                                </div>
                                <hr size="2" style="width: 100%">
<!--                                <div class="title" style="font-weight: bold;">权益信息-->
<!--                                    <div class="info">-->
<!--                                        &lt;!&ndash;<div class="info-item">负责人：<span class="text" th:text="${opportunity.userName}"></span></div>-->
<!--                                        <div class="info-item">创建人：<span class="text" th:text="${opportunity.userName}"></span></div>&ndash;&gt;-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                                <hr size="2">-->
                            </div>
                        </div>
                    </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

</div>
<!-- 修改头像 -->
<div class="modal fade" id="editHeadModal" tabindex="-1" role="dialog" aria-labelledby="editHeadModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="topEdit">
                <div class="img-box" id="">
                    <img id="newsPic" th:src="@{(${userInfo.accessUrl})}">
                    <div id="imageId" style="display: none" th:text="${userInfo.uploadId}"></div>
                </div>
                <label for="files">
                    <span class="btn btn-default btn-label"><label><i class="mdi mdi-upload"></i></label>上传图片</span>
                    <input type="file" id="files" onchange="getNewsPicUpload(this)" class="hide">
                </label>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="baseInfo(3)" data-dismiss="modal">保存</button>
            </div>
        </div>
    </div>
</div>
<!--    教育经历添加弹窗-->
<div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="staticBackdropLabel">添加教育经历</h4>
            </div>
            <div class="modal-body">
                <div class="form-row clearfix">
                    <div class="form-group col-md-6">
                        <label class="control-label label-required">合同起止日期</label>
                        <div class="form-content">
                            <input type="text" class="form-control" id="startAndEndTm" placeholder="请选择合同起止日期" autocomplete="off">
                        </div>
<!--                        <label for="startAndEndTm">时间起止</label>-->
<!--                        <input class="form-control" type="text" id="startAndEndTm"  placeholder="请输入时间起止" >-->
                    </div>
                    <div class="form-group col-md-6">
                        <label for="school">所在院校</label>
                        <input id="school" type="text" class="form-control" placeholder="请输入所在院校">
                    </div>
                </div>
                <div class="form-row clearfix">
                    <div class="form-group col-md-6">
                        <label for="degree">所学专业</label>
                        <input id="degree" type="text" class="form-control" placeholder="请输入所学专业">
                    </div>
                    <div class="form-group col-md-6">
                        <label for="major">学位</label>
                        <input id="major" type="text" class="form-control" placeholder="请选择学位" >
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消 </button>
                <button type="button" class="btn btn-primary" onclick="sureBtn()">确定</button>
            </div>
        </div>
    </div>
</div>
<!-- 修改密码模态框 -->
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" id="editModel"
     data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog modal-lg" role="document" style="width: 650px;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                <h4 class="modal-title">修改密码</h4>
            </div>
            <div class="modal-body">
                <!-- start -->
                <form class="form-horizontal clearfix" style="margin-left: 150px; padding: 20px 0;">
                    <div class="form-group" style="width: 100%">
                        <label class="col-sm-1 control-label" style="width: 130px;text-align: left;"
                               for="oldPassword">原密码</label>
                        <div class="col-sm-8">
                            <input type="password" id="oldPassword" name="oldPassword" style="width: 200px;"
                                   placeholder="请输入原密码" onblur="oldPasswordValidate()">
                            <div class="pwd-eye" id="old-pwd-eye"
                                 style="background-image: url('/images/login/password-hide.png');"
                                 data-flag="show" onclick="pwdEye('old-pwd-eye','oldPassword')"></div>
                            <span id="oldPasswordMsg" class="tipMsg"></span>
                        </div>
                    </div>

                    <div class="form-group" style="width: 100%">
                        <label class="col-sm-1 control-label" style="width: 130px;text-align: left;"
                               for="password">新密码</label>
                        <div class="col-sm-8">
                            <input type="password" id="password" name="password" style="width: 200px;"
                                   placeholder="请输入新密码" onblur="resetPasswordValidate()">
                            <div class="pwd-eye" id="pwd-eye"
                                 style="background-image: url('/images/login/password-hide.png');"
                                 data-flag="show" onclick="pwdEye('pwd-eye','password')"></div>
                            <span id="passwordMsg" class="tipMsg"></span>
                        </div>
                    </div>

                    <div class="form-group" style="width: 100%">
                        <label class="col-sm-1 control-label" style="width: 130px;text-align: left;"
                               for="rePassword">再次输入新密码</label>
                        <div class="col-sm-8">
                            <input type="password" id="rePassword" name="rePassword" style="width: 200px;"
                                   placeholder="请再次输入新密码" onblur="resetPasswordValidate()">
                            <div class="pwd-eye" id="re-pwd-eye"
                                 style="background-image: url('/images/login/password-hide.png');"
                                 data-flag="show" onclick="pwdEye('re-pwd-eye','rePassword')"></div>
                            <span id="rePasswordMsg" class="tipMsg"></span>
                        </div>
                    </div>

                </form>
                <!--<div style="width: 100%;text-align: center;">
                    <button class="btn btn-primary" type="submit" style="margin-right: 20px;border-radius: 17px;"
                            onclick="resetPassword()">提交
                    </button>
                    <div type="button" class="btn btn-default" style="border-radius: 17px;" data-dismiss="modal">取消</div>
                </div>-->
                <!-- end -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="resetPassword()">保存</button>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/js/perfect-scrollbar.min.js"></script>
<!--标签插件-->
<script src="/js/jquery-tags-input/jquery.tagsinput.min.js"></script>
<script type="text/javascript" src="/js/main.min.js"></script>
<script type="text/javascript" src="/js/bootstrap-table/bootstrap-table.min.js"></script>
<script type="text/javascript" src="/js/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>
<script type="text/javascript" src="/js/popper.min.js"></script>
<script type="text/javascript" src="/js/jquery.cookie.min.js"></script>
<script src="/js/jquery-confirm/jquery-confirm.min.js"></script>
<script src="/js/crm/common/city.js"></script>
<!--日期选择插件-->
<script src="/js/crm/common/common.js"></script>
<!--时间选择插件-->
<script src="/js/bootstrap-datetimepicker/moment.min.js"></script>
<script src="/js/bootstrap-datetimepicker/bootstrap-datetimepicker.min.js"></script>
<script src="/js/bootstrap-datetimepicker/locale/zh-cn.js"></script>
<script type="text/javascript" src="/js/crm/common/dataRangePicker.min.js"></script>

<!--时间选择插件-->
<script src="/js/bootstrap-datetimepicker/moment.min.js"></script>
<script src="/js/bootstrap-datetimepicker/bootstrap-datetimepicker.min.js"></script>
<script src="/js/bootstrap-datetimepicker/locale/zh-cn.js"></script>
<!--日期选择插件-->
<script src="/js/bootstrap-datepicker/bootstrap-datepicker.min.js"></script>
<script src="/js/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js"></script>
<!-- 图表 -->
<script type="text/javascript" src="/js/echarts.min.js"></script>
<script src="/js/crm/user/userInfo.js"></script>

</html>